<template>
  <el-container class="home-container">
    <el-header>
      <img src="../../assets/logo.png" class="logo" />叩丁狼人事管理系统
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleMenu">|||</div>
        <el-menu
          unique-opened
          background-color="#333744"
          text-color="#fff"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <el-submenu
            :index="item.id + ''"
            v-for="(item, index) in menulist"
            :key="item.id"
          >
            <template slot="title">
              <i :class="objicons[index]"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              :index="subitem.path + ''"
              :key="subitem.id + ''"
              v-for="subitem in item.children"
            >
              <i class="el-icon-menu"></i>
              <span>{{ subitem.name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
          <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      menulist: [
        {
          id: 1,
          name: "系统管理",
          children: [
            {
              id: 10,
              name: "部门管理",
              path: "/department"
            },
            {
              id: 11,
              name: "员工管理",
              path: "/employee"
            },
            {
              id: 12,
              name: "权限管理",
              path: '/permission'
            },
            {
              id: 13,
              name: "角色管理",
              path: "/role"
            },
          ],
        },
        {
          id: 2,
          name: "数据管理",
          children: [
            {
              id: 20,
              name: "字典目录",
            },
            {
              id: 21,
              name: "字典明细",
            },
            {
              id: 22,
              name: "测试",
              path: "/test"
            },
          ],
        },
        {
          id: 3,
          name: "客户管理",
          children: [
            {
              id: 30,
              name: "客户列表",
            },
            {
              id: 31,
              name: "潜在客户",
            },
            {
              id: 32,
              name: "客户池",
            },
            {
              id: 33,
              name: "失败客户",
            },
            {
              id: 34,
              name: "正式客户",
            },
            {
              id: 35,
              name: "流失客户",
            },
          ],
        },
        {
          id: 4,
          name: "客户历史",
          children: [
            {
              id: 40,
              name: "跟进历史",
            },
            {
              id: 41,
              name: "移交历史",
            },
          ],
        },
        {
          id: 5,
          name: "报表统计",
          children: [
            {
              id: 50,
              name: "潜在客户报表",
            },
          ],
        },
      ],
      objicons: [
        "iconfont icon-users",
        "iconfont icon-tijikongjian",
        "iconfont icon-shangpin",
        "iconfont icon-danju",
        "iconfont icon-baobiao",
      ],
      isCollapse: false,
    };
  },
  methods: {
    toggleMenu: function () {
      this.isCollapse = !this.isCollapse;
    },
    async logout(){
      // 发送请求退出
      const { data: res } = await this.$http.get("logout");
      if (res.code != 200) {
        console.log("退出失败");
      } else {
        console.log("退出成功");
        sessionStorage.clear();
        this.$router.push("/login");
      }
    }
  },
};
</script>
<style>
@import "../../assets/css/home/home.css";

</style>